<template>
  <div class="tabs_con">
    <van-tabs v-model="currentDate" @change="change" :background="'#F9FAFC'">
      <van-tab
        v-for="(item, index) in dateArr"
        :title="timeFormat(item, 'M月D日')"
        :key="index"
      >
        <div class="tab_title">一等奖</div>

        <template v-if="prizeList.length > 0">
          <div
            v-for="(item, index) in prizeList"
            :key="index"
            class="prize_item"
          >
            <span>{{ index + 1 }}</span>
            <span>{{ item }}</span>
            <span>车票报销</span>
          </div>

          <img :src="noMore" alt="" class="no_more" />
        </template>

        <template v-else>
          <div class="tab_con">
            <img :src="img10" alt="" class="tab_image" />
            <div class="tab_content">
              {{ timeFormat(item, "M月D日") }}18:00开奖
            </div>
          </div>
        </template>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Tab, Tabs, Popup, Divider } from "vant";
import { timeGapArr, timeFormat, isBeforeOrAfterGap } from "@/utils/util";
import { drawApi } from "@/service";
import { img10, noMore } from "@/constant";

export default {
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Popup.name]: Popup,
    [Divider.name]: Divider
  },
  created() {
    let { serviceTime, drawStartDate, drawEndDate } = this.mainPage;
    let res = isBeforeOrAfterGap(serviceTime, drawStartDate, drawEndDate);
    if (res === 0) serviceTime = drawStartDate;
    else if (res === 1) serviceTime = drawEndDate;

    this.currentDate =
      this.dateArr.findIndex(
        item => item === timeFormat(serviceTime, "YYYY-MM-DD")
      ) || 0;
    this.getData();
  },
  data() {
    return {
      currentDate: 0,
      prizeList: [],
      img10,
      noMore
    };
  },
  props: {},
  computed: {
    mainPage() {
      return this.$store.state.mainPage;
    },
    dateArr() {
      const { drawStartDate, drawEndDate } = this.mainPage;
      return timeGapArr(drawStartDate, drawEndDate);
    }
  },
  methods: {
    timeFormat(val, format) {
      return timeFormat(val, format);
    },
    change(e) {
      this.currentDate = e;
      this.getData();
    },
    async getData() {
      const { drawStartDate } = this.mainPage;
      let { isDraw, firstMobiles } = await drawApi({
        drawDate:
          this.dateArr[this.currentDate] ||
          timeFormat(drawStartDate, "YYYY-MM-DD")
      });
      if (isDraw === "0") return (this.prizeList = []);
      // TODO: undo this
      return (this.prizeList = firstMobiles);
      // this.prizeList = [
      //   "159****3361",
      //   "159****3361",
      //   "159****3361",
      //   "159****3361",
      //   "159****3361",
      //   "159****3361",
      //   "159****3361",
      //   "159****3361"
      // ];
    }
  }
};
</script>

<style lang="scss">
@import "@/app.scss";

.tabs_con {
  height: calc(100% - 21px);
  background-color: #fff;
  // text-align: center;
}
.tab_con {
  text-align: center;

  .tab_image {
    width: 145px;
    margin: 82px auto 50px auto;
  }

  .tab_content {
    font-size: 42px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #303030;
  }
}

.tab_title {
  font-size: 40px;
  font-family: PingFang SC;
  font-weight: 400;
  margin-top: 27px;
  color: #303030;
  text-align: center;
}
.prize_item {
  @include flex_config(space-between, center, row);
  margin: 52px 72px 52px 114px;
  font-size: 30px;

  font-weight: 500;
  color: #303030;
}

.no_more {
  width: 268px;
  margin: 0 auto 30px auto;
}

.van-tab {
  width: 33.33%;
}

.van-tabs__wrap {
  height: 44px;
}

.van-tab__pane {
  height: calc(55vh - 100px);
  overflow: auto;
  text-align: center;
}
</style>

<style></style>
